$(function () {
    // 1.实现图片的预览
    $('#inputCover').on('change', function () {
        // files:是一个原生的属性，只能通过dom元素方式来调用
        let myurl = URL.createObjectURL(this.files[0])
        $('.article_cover').attr('src', myurl)
    })
    // 2.动态加载分类数据
    // 动态渲染分类数据
    $.ajax({
        url: bignew.category_list,
        dataType: 'json',
        success: function (res) {
            if (res.code == 200) {
                // 调用模板引擎的时候传入一个对象，在模板中可以使用这个对象的属性
                let html = template('cateListTemp', res)
                $('.category').html(html)
            }
        }
    })
    // 3.初始化日期插件
    jeDate("#indate", {
        trigger: "click",
        format: "YYYY-MM-DD",
        isTime: false,
        minDate: "2014-09-19",
        theme: { bgcolor: "#D91600", pnColor: "#FF6653" }
    })
    // 4.初始化富文本框插件
    tinymce.init({
        selector: '#mytextarea',
        language: 'zh_CN',
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste imagetools wordcount",
            "code"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code"
    });
    // 封装文章发布和存储为草稿的方法
    function publichArticle(state) {
        let formdata = new FormData($('#form')[0])
        // 追加文章内容参数
        formdata.append('content', tinymce.activeEditor.getContent())
        // 追加文章类型
        formdata.append('state', state)

        $.ajax({
            type: 'post',
            url: bignew.article_publish,
            data: formdata,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function (res) {
                console.log(res)
                if (res.code == 200) {
                    alert(res.msg)
                    location.href = './article_list.html'
                }
            }
        })
    }
    // 实现文章新增
    $('.btn-release').on('click', function () {
        publichArticle('已发布')
        // tinymce.activeEditor.getContent():可以获取富文本框的内容，这是一个网页结构
        // console.log(tinymce.activeEditor.getContent())
        // 重点是收集数据  formdata  serialize() 手动
        // 如果在创建formdata时传递一个表单元素做为参数，那么它可以收集这个表单中拥有name属性的表单元素的value值(表单只能是dom元素类型)
        // 1.它可以收集图片数据
        // 2.它还可以手动的追加参数
        // let formdata = new FormData($('#form')[0])
        // console.log(...formdata);
    })
    // 存为草稿
    $('.btn-draft').on('click', function () {
        publichArticle('草稿')
    })
})